<template>
  <div class="app-container">
    <div class="data-info">
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                <p>今日发送采购</p>
                <el-tooltip
                  effect="dark"
                  content="统计当日累计发送采购计划数量"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="text">2</div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                <p>今日累计签收</p>
                <el-tooltip
                  effect="dark"
                  content="统计当日累计签收数量"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="text">2</div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                <p>今日累计确认账单金额</p>
                <el-tooltip
                  effect="dark"
                  content="统计当日累计确认账单的总金额"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="text">￥78,000.00</div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                <p>本月累计发送采购</p>
                <el-tooltip
                  effect="dark"
                  content="统计本月累计发送采购计划数量"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="text">2</div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="4.8" :sm="4.8" :md="4.8" :lg="4.8" :span="4.8">
          <el-card>
            <div class="chart-item">
              <div>
                <p>本月累计确认账单金额</p>
                <el-tooltip
                  effect="dark"
                  content="统计本月累计确认账单的总金额"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div class="text">￥178,000.00</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :xs="11" :sm="11" :md="11" :lg="11" :span="11">
          <el-card>
            <!-- 民商信状态分布 -->
            <div class="table">
              <div class="table-title">采购管理（待办事项）</div>
              <div class="table-line"></div>
              <div class="table-content">
                <el-table :data="purchasingManagementList" style="width: 100%">
                  <el-table-column
                    prop="messageTitle"
                    label="待办项"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="messageName"
                    label="采购计划名称"
                    width="200"
                  >
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="toDealWith(scope.row, 1)"
                        >去处理</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  class="text-center bgfff pd10 flex-shrink-0"
                  v-show="queryParams1.total > 0"
                  :total="queryParams1.total"
                  :page.sync="queryParams1.pageNum"
                  :limit.sync="queryParams1.pageSize"
                  @pagination="getList1"
                />
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="11" :sm="11" :md="11" :lg="11" :span="11">
          <el-card>
            <div class="table">
              <div class="table-title">对账单管理（待办事项）</div>
              <div class="table-line"></div>
              <div class="table-content">
                <el-table :data="statementManagementList" style="width: 100%">
                  <el-table-column prop="sureBill" label="待办项" width="180">
                  </el-table-column>
                  <el-table-column prop="number" label="账单编号" width="180">
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="toDealWith(scope.row, 2)"
                        >去处理</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  class="text-center bgfff pd10 flex-shrink-0"
                  v-show="queryParams2.total > 0"
                  :total="queryParams2.total"
                  :page.sync="queryParams2.pageNum"
                  :limit.sync="queryParams2.pageSize"
                  @pagination="getList2"
                />
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: "Index",
  data() {
    return {
      purchasingManagementList: [
        {
          id: 1,
          messageTitle: "采购计划待发送请求",
          messageName: "四川中梓通材料采购计划表",
        },
        {
          id: 2,
          messageTitle: "采购计划待发送请求",
          messageName: "四川领袖建筑采购计划表",
        },
        {
          id: 3,
          messageTitle: "采购计划待发送请求",
          messageName: "重庆未来建筑采购计划表",
        },
        {
          id: 4,
          messageTitle: "采购计划待发送请求",
          messageName: "湖北通捷建筑采购计划表",
        },
        {
          id: 5,
          messageTitle: "采购计划待发送请求",
          messageName: "湖北时尚建材采购计划表",
        },
        {
          id: 6,
          messageTitle: "采购计划待发送请求",
          messageName: "四川马上建筑采购计划表",
        },
        {
          id: 7,
          messageTitle: "采购计划待发送请求",
          messageName: "四川通用建材采购计划表",
        },
        {
          id: 8,
          messageTitle: "采购计划待发送请求",
          messageName: "四川零度建筑采购计划表",
        },
      ],
      statementManagementList: [
        {
          id: 1,
          sureBill: "供应商账单确认1",
          number: "DZ000001",
          type: 1,
        },
        {
          id: 2,
          sureBill: "采购商账单确认2",
          number: "DZ000002",
          type: 2,
        },
        {
          id: 3,
          sureBill: "供应商账单确认3",
          number: "DZ000003",
          type: 1,
        },
        {
          id: 4,
          sureBill: "供应商账单确认4",
          number: "DZ000004",
          type: 1,
        },
        {
          id: 5,
          sureBill: "供应商账单确认5",
          number: "DZ000005",
          type: 1,
        },
        {
          id: 6,
          sureBill: "供应商账单确认6",
          number: "DZ000006",
          type: 1,
        },
        {
          id: 7,
          sureBill: "供应商账单确认7",
          number: "DZ000007",
          type: 1,
        },
        {
          id: 8,
          sureBill: "供应商账单确认8",
          number: "DZ000008",
          type: 1,
        },
      ],
      loading1: false,
      queryParams1: {
        total: 8,
        pageNum: 1,
        pageSize: 10,
      },
      loading2: false,
      queryParams2: {
        total: 8,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    toDealWith(row, type) {
      let path = "";
      let query = {
        id: row.id,
      };
      if (type === 1) {
        path = "/purchase-manager/purchase-plan-list";
      } else {
        if (row.type === 1) {
          path = "/supplierAccountStatement";
        } else {
          path = "/purchaserAccountStatement";
        }
      }

      this.$router.push({
        path,
        query,
      });
    },
    getList1() {
      this.loading1 = false;
      this.queryParams1.total = 8;
    },
    getList2() {
      this.loading2 = false;
      this.queryParams2.total = 8;
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
  overflow-y: scroll;
  .data-info {
    overflow-y: scroll;
    .chart-item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      p {
        display: inline-block;
        margin-right: 10px;
        font-size: 24px;
        font-weight: 500;
      }
      i {
        font-size: 24px;
      }
      .text {
        font-size: 28px;
        font-weight: 600;
      }
    }
    .table {
      &-title {
        font-size: 22px;
        font-weight: 600;
      }
      &-line {
        width: 100%;
        height: 1px;
        background-color: #e8e8e8;
        margin-top: 10px;
      }
    }
  }
}
</style>
